<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置组件 -slot讲解</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>内置组件 -slot讲解</h1>
<hr>
<div id="app">
    <fesine>
        <span slot="blogUrl">{{blogData.webUrl}}</span>
        <span slot="netName">{{blogData.netName}}</span>
        <span slot="skill">{{blogData.skill}}</span>
    </fesine>
    <soly></soly>
</div>
<template id="temp">
    <div>
        <p>博客地址:<slot name="blogUrl"></slot></p>
        <p>网名:
            <slot name="netName"></slot></p>
        <p>技能:
            <slot name="skill"></slot></p>
    </div>
</template>
<template id="temp1">
    <div>
        <p>博客地址:{{blogData.webUrl}}</p>
        <p>网名:{{blogData.netName}}</p>
        <p>技能:{{blogData.skill}}</p>
    </div>
</template>
<script type="text/javascript">
    var blogC = {
      template:'#temp'
    }
    var blogD = {
      template:'#temp1',
      data(){
        return {
          blogData: {
            webUrl: 'http://www.baidu.com',
            netName: 'fesine',
            skill: 'javascript'
          }
        }
      }
    }
    //创建自定义组件
    var app = new Vue({
      el:'#app',
      data:{
        blogData:{
          webUrl:'http://www.baidu.com',
          netName:'fesine',
          skill:'javascript'
        }
      },
      components: {
        'fesine': blogC,
        'soly': blogD
      }
    })
</script>
</body>
</html>